<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>流畅的水平滚动容器</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
      }

      body {
        background-color: #121212;
        color: #e0e0e0;
        padding: 2rem;
      }

      .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
      }

      h1 {
        color: #ffffff;
        text-align: center;
        margin-bottom: 2rem;
        font-weight: 600;
      }

      .scroll-hint {
        text-align: center;
        color: #6e6e6e;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      .scroll-container {
        height: 300px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 1rem;
        position: relative;
        user-select: none;
        /* 硬件加速优化 */
        will-change: scroll-position;
        -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
      }

      .scroll-content {
        display: flex;
        height: 100%;
        gap: 1.5rem;
        padding: 1.5rem;
        min-width: max-content;
      }

      .scroll-item {
        max-width: 180px;
        background-color: #1e1e1e;
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .scroll-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
      }

      .scroll-item h3 {
        color: #bb86fc;
        margin-bottom: 1rem;
        font-size: 1.2rem;
      }

      .scroll-item p {
        color: #a0a0a0;
        font-size: 0.95rem;
        line-height: 1.6;
      }

      /* 自定义水平滚动条 */
      .scroll-container::-webkit-scrollbar {
        height: 6px;
      }
      /* 滚动条背景 */
      .scroll-container::-webkit-scrollbar-track {
        background: #1e1e1e;
        border-radius: 10px;
      }
      /*  滚动条滑块 */
      .scroll-container::-webkit-scrollbar-thumb {
        background: #3d3d3d;
        border-radius: 10px;
        /* transition: background 0.3s ease; */
      }

      .scroll-container::-webkit-scrollbar-thumb:hover {
        background: #525252;
      }

      .scroll-container::-webkit-scrollbar-thumb:active {
        background: #666666;
      }

      .scroll-container::-webkit-scrollbar-corner {
        background: transparent;
      }

      .scroll-indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        padding: 0.5rem 0;
      }

      .indicator-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: #3d3d3d;
        transition: background-color 0.3s ease;
      }

      .indicator-dot.active {
        background-color: #bb86fc;
      }

      .info-box {
        background-color: #1e1e1e;
        border-radius: 8px;
        padding: 1.2rem;
        margin-top: 2rem;
        border-left: 3px solid #03dac6;
      }

      .info-box h3 {
        color: #03dac6;
        margin-bottom: 0.8rem;
        font-size: 1.1rem;
      }

      .info-box p {
        color: #a0a0a0;
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
      }

      @media (max-width: 768px) {
        .scroll-item {
          min-width: 120px;
        }

        body {
          padding: 1rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>流畅的水平滚动容器</h1>

      <div class="scroll-hint">
        <span>提示：使用鼠标滚轮或触摸滑动来左右滚动</span>
      </div>

      <div class="scroll-container" id="horizontalScroll">
        <div class="scroll-content">
          <div class="scroll-item">
            <h3>项目卡片 1</h3>
            <p>
              优化后的滚动体验更加流畅，响应速度更快，不会出现卡顿现象。滚动速度根据滚轮力度智能调整。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 2</h3>
            <p>
              采用了硬件加速技术，使滚动动画更加平滑。同时优化了滚动惯性，操作手感更自然。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 3</h3>
            <p>
              容器宽度会随窗口大小自动调整，在各种设备上都能提供一致的体验。固定高度确保布局稳定性。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 4</h3>
            <p>
              自定义滚动条与整体设计风格统一，既美观又实用。滚动时还可以使用键盘左右箭头控制。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 5</h3>
            <p>
              水平滚动特别适合展示图片画廊、产品列表或时间线等内容，提供直观的浏览方式。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 6</h3>
            <p>
              继续添加更多内容，以便能够完整展示水平滚动效果。尝试调整浏览器窗口大小，观察容器宽度的变化。
            </p>
          </div>

          <div class="scroll-item">
            <h3>项目卡片 7</h3>
            <p>
              最后一个项目卡片，展示完整的水平滚动范围。滚动条样式经过优化，在深色背景下既不突兀又易于识别。
            </p>
          </div>
        </div>

        <div class="scroll-indicator" id="scrollIndicator">
          <div class="indicator-dot active"></div>
          <div class="indicator-dot"></div>
          <div class="indicator-dot"></div>
        </div>
      </div>

      <div class="info-box">
        <h3>优化亮点</h3>
        <p>• 流畅滚动：优化了滚动速度和动画效果，消除卡顿</p>
        <p>• 智能响应：滚动距离随滚轮力度变化，操作更自然</p>
        <p>• 硬件加速：使用 will-change 提升滚动性能</p>
        <p>• 触摸优化：移动端支持平滑滚动</p>
        <p>• 键盘控制：左右箭头键滚动更精准</p>
      </div>
    </div>

    <script>
      const scrollContainer = document.getElementById("horizontalScroll");
      const scrollIndicator = document.getElementById("scrollIndicator");
      const indicatorDots = scrollIndicator.querySelectorAll(".indicator-dot");

      // 优化滚轮滚动
      scrollContainer.addEventListener(
        "wheel",
        (e) => {
          e.preventDefault();

          // 关键优化：根据滚轮力度动态调整滚动距离
          // 小力度滚动时更精确，大力度滚动时更快
          const baseSpeed = 0.7; // 基础速度系数
          const isLargeDelta = Math.abs(e.deltaY) > 50;
          const speedMultiplier = isLargeDelta ? 5 : 0.5;
          const scrollAmount = e.deltaY * baseSpeed * speedMultiplier;

          // 移除smooth行为，使用requestAnimationFrame实现更流畅的滚动
          const currentScroll = scrollContainer.scrollLeft;
          const targetScroll = currentScroll + scrollAmount;

          // 动画滚动实现
          let start = null;
          const duration = isLargeDelta ? 300 : 200; // 动态调整动画时长

          function step(timestamp) {
            if (!start) start = timestamp;
            const progress = Math.min((timestamp - start) / duration, 1);
            // 使用缓动函数使滚动更自然
            const easeProgress =
              progress < 0.5
                ? 4 * progress * progress * progress
                : 1 - Math.pow(-2 * progress + 2, 3) / 2;

            scrollContainer.scrollLeft =
              currentScroll + (targetScroll - currentScroll) * easeProgress;

            if (progress < 1) {
              window.requestAnimationFrame(step);
            }
          }

          window.requestAnimationFrame(step);
        },
        { passive: false }
      );

      // 滚动指示器更新
      scrollContainer.addEventListener("scroll", () => {
        const scrollPercentage =
          scrollContainer.scrollLeft /
            (scrollContainer.scrollWidth - scrollContainer.clientWidth) || 0;

        const dotIndex = Math.min(
          Math.floor(scrollPercentage * indicatorDots.length),
          indicatorDots.length - 1
        );

        indicatorDots.forEach((dot, index) => {
          dot.classList.toggle("active", index === dotIndex);
        });
      });

      // 优化键盘控制
      document.addEventListener("keydown", (e) => {
        // 避免在输入框等可编辑区域触发滚动
        const activeElement = document.activeElement;
        if (
          activeElement.tagName === "INPUT" ||
          activeElement.tagName === "TEXTAREA" ||
          activeElement.isContentEditable
        ) {
          return;
        }

        if (isElementInViewport(scrollContainer)) {
          const scrollStep = window.innerWidth < 768 ? 300 : 500; // 响应式滚动距离
          if (e.key === "ArrowLeft") {
            e.preventDefault();
            scrollContainer.scrollBy({ left: -scrollStep, behavior: "smooth" });
          } else if (e.key === "ArrowRight") {
            e.preventDefault();
            scrollContainer.scrollBy({ left: scrollStep, behavior: "smooth" });
          }
        }
      });

      function isElementInViewport(el) {
        const rect = el.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <=
            (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <=
            (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    </script>
  </body>
</html>
